<template>
  <div class="homePageLq">
    <div class="topCenter">
      <div class="topL">
        <div class="L1">
          <div class="titleBox">
            <img class="imgTBg" :src="titleBg" alt="标题背景" />
            <span class="textT"> 基本信息 </span>
          </div>
          <div class="selectBox">
            <div class="bhzNameBox">
              <div class="itemBox">拌合站名称:</div>
              <el-select @change="handleSelect" v-model="bhzName">
                <el-option
                  v-for="item in bhzList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="oneRow">
            <div class="Row">
              <div>
                <img :src="row11" alt="标题背景" />
              </div>
              <div class="rRow">
                <div class="r1">生产总量</div>
                <div class="r2">
                  {{ countObj.sczl || "-" }} <span class="dw">吨</span>
                </div>
              </div>
            </div>

            <div class="Row">
              <div>
                <img :src="row12" alt="标题背景" />
              </div>
              <div class="rRow">
                <div class="r1">生产批次总量</div>
                <div class="r2">
                  {{ countObj.scpczl || "0" }} <span class="dw">次</span>
                </div>
              </div>
            </div>
          </div>
          <div class="oneRow">
            <div class="Row">
              <div>
                <img :src="row21" alt="标题背景" />
              </div>
              <div class="rRow">
                <div class="r1">当日生产总量</div>
                <div class="r2">
                  {{ countObj.daySczl || "-" }} <span class="dw">吨</span>
                </div>
              </div>
            </div>
            <div class="Row">
              <div>
                <img :src="row22" alt="标题背景" />
              </div>
              <div class="rRow">
                <div class="r1">最后生产时间</div>
                <div class="r2">{{ countObj.zhscsj || "-" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="L2">
          <div class="titleBox">
            <img class="imgTBg" :src="titleBg" alt="标题背景" />
            <span class="textT"> 内掺比 </span>
          </div>
          <div
            id="neiChanBi"
            style="height: calc(100% - 50px); width: 100%"
          ></div>
        </div>
      </div>
      <div class="cBj"></div>
      <div class="topR">
        <div class="neiChanBi">
          <div class="titleBox">
            <img class="imgTBg" :src="titleBg" alt="标题背景" />
            <span class="textT"> 温度曲线 </span>
          </div>
          <div id="wdqx" style="height: calc(100% - 50px); width: 100%"></div>
        </div>
        <div class="youShiBi">
          <div class="titleBox">
            <img class="imgTBg" :src="titleBg" alt="标题背景" />
            <span class="textT"> 油石比 </span>
          </div>
          <div
            id="youShiBi"
            style="height: calc(100% - 50px); width: 100%"
          ></div>
        </div>
      </div>
    </div>
    <div class="titleBox table-border-title">
      <img class="imgTBg" :src="titleBg" alt="标题背景" />
      <span class="textT"> 日流水统计 </span>
    </div>
    <div class="bTable">
      <el-table
        size="mini"
        v-loading="loadingOne"
        :data="dayTableData"
        max-height="256"
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column
          prop="currDate"
          label="日期"
          align="center"
          width="133"
          fixed="left"
          key="dischargeTimeWeight"
        ></el-table-column>
        <el-table-column
          prop="gl1SumWeight"
          label="骨料1(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.gl1SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="gl2SumWeight"
          label="骨料2(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.gl2SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="gl3SumWeight"
          label="骨料3(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.gl3SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="gl4SumWeight"
          label="骨料4(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.gl4SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="gl5SumWeight"
          label="骨料5(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.gl5SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="gl6SumWeight"
          label="骨料6(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.gl6SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="fl1SumWeight"
          label="粉料1(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.fl1SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="fl2SumWeight"
          label="粉料2(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.fl2SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="fl3SumWeight"
          label="粉料3(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        >
          <template slot-scope="scope">{{
            scope.row.fl3SumWeight || "-"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="glSumWeight"
          label="骨料合计(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        ></el-table-column>
        <el-table-column
          prop="flSumWeight"
          label="粉料合计(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        ></el-table-column>
        <el-table-column
          prop="lqSumWeight"
          label="沥青合计(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        ></el-table-column>
        <el-table-column
          prop="ylSumWeight"
          label="用料总合计(kg)"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        ></el-table-column>
      </el-table>
    </div>
    <div class="titleBox table-border-title">
      <img class="imgTBg" :src="titleBg" alt="标题背景" />
      <span class="textT"> 生产流水 </span>
    </div>
    <div class="bTable">
      <!-- :height="tableHeight" -->
      <el-table
        size="mini"
        v-loading="loadingTwo"
        :data="tableData"
        max-height="290"
        style="width: 100%"
      >
        <el-table-column
          prop="dischargeTime"
          label="时间"
          align="center"
          width="133"
          fixed="left"
          key="dischargeTimeWeight"
        ></el-table-column>

        <el-table-column
          prop="asphaltTemperature"
          label="成品料温"
          align="center"
          min-width="73"
          fixed="left"
          key="asphaltTemperature"
        ></el-table-column>

        <el-table-column
          prop="matchName"
          label="配方名称"
          align="center"
          min-width="90"
          fixed="left"
          key="matchName"
        ></el-table-column>

        <el-table-column
          prop="batchWeight"
          label="总重量(kg)"
          align="center"
          key="batchWeight"
          filter-multiplewidth="100"
          min-width="85"
        ></el-table-column>
        <el-table-column
          prop="desc"
          label="类别"
          align="center"
          key="desc"
          filter-multiplewidth="100"
          min-width="85"
        ></el-table-column>

        <el-table-column
          prop="asphaltAggregateRatio"
          label="油石比"
          align="center"
          filter-multiplewidth="80"
          min-width="90"
        ></el-table-column>
        <template v-for="item of colControl">
          <el-table-column
            :label="item.label + '(kg)'"
            align="center"
            :key="item.value + 'ActWeight'"
            min-width="79"
          >
            <template slot-scope="scope"
              ><span>{{ scope.row[item.value + "Act"] || "-" }}</span></template
            >
          </el-table-column>
        </template>
        <el-table-column
          prop="asphaltAct"
          label="沥青(kg)"
          align="center"
          min-width="73"
        >
          <template slot-scope="scope"
            ><span>{{ scope.row.asphaltAct || "-" }}</span></template
          >
        </el-table-column>
        <el-table-column
          prop="recycledMaterialAct"
          label="再生料(kg)"
          align="center"
          width="85"
        >
          <template slot-scope="scope"
            ><span>{{ scope.row.recycledMaterialAct || "-" }}</span></template
          >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
  homeCount,
  dayWeightList,
  weightList,
} from "@/api/bitumenMixingStation/homePage.js";
import decimal from "@/utils/big-decimal";
import constant from "@/api/waterStability/producedData/constant";
import { businessDeptTree } from "@/api/common/common";

export default {
  name: "homePage",
  components: {},
  props: {},
  data() {
    return {
      titleBg: require("@/assets/images/homePage/tbg1p.png"),
      row11: require("@/assets/images/homePage/l11.png"),
      row12: require("@/assets/images/homePage/l12.png"),
      row21: require("@/assets/images/homePage/l21.png"),
      row22: require("@/assets/images/homePage/l22.png"),
      bhzmc: ["zhinan", "shejiyuanze", "yizhi"], // 设置默认值
      dayTableData: [],
      dayTableTotal: {},
      tableData: [],
      // 默认表格列名称
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 控制显示隐藏表格列
      colControl: [],
      colNameDef: {
        gravel1: "骨料1",
        gravel2: "骨料2",
        gravel3: "骨料3",
        gravel4: "骨料4",
        gravel5: "骨料5",
        gravel6: "骨料6",
        powder1: "粉料1",
        powder2: "粉料2",
        powder3: "粉料3",
      },
      tableHeight: window.innerHeight - 770,
      echartsL2: null,
      echartsR1: null,
      echartsR2: null,
      echartsR3: null,
      ncbData: {},
      wdData: {},
      ysbData: {},
      countObj: {},
      jpqxObj: {},
      deptOptions: undefined,
      bhzList: [],
      bhzName: "",
      loadingTwo: false,
      loadingOne: false,
    };
  },
  created() {
    this.getList();

    this.initColControl();
  },
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getList() {
      businessDeptTree().then((res) => {
        this.deptOptions = res.data;
        this.bhzList = this.extractLeafNodes(res.data);
        this.bhzName = this.bhzList[0].id;
        this.$nextTick(() => {
          this.getHomeCount();
          this.getDayWeightList();
          this.getweightList();
        });
      });
    },
    // 获取最后一级节点
    extractLeafNodes(nodes) {
      let leafNodes = [];
      nodes.forEach((node) => {
        if (node.children && node.children.length) {
          // 如果节点有子节点，则递归查找
          if (node.level === 2) {
            node.latitude = node.label;
            node.children.forEach((v) => {
              v.latitude = node.label;
            });
          } else if (node.level === 3) {
            node.region = node.label;
            node.latitude = node.latitude;
            node.children.forEach((v) => {
              v.region = node.label;
              v.latitude = node.latitude;
            });
          }

          leafNodes = leafNodes.concat(this.extractLeafNodes(node.children));
        } else {
          // 如果节点没有子节点，则将其添加到叶子节点数组中
          leafNodes.push(node);
        }
      });
      return leafNodes;
    },
    handleSelect(val) {
      this.bhzName = val;
      this.$nextTick(() => {
        this.getHomeCount();
        this.getDayWeightList();
        this.getweightList();
      });
    },
    initColControl() {
      let colArray = [];
      let sieveArray = [];
      if (this.currentMatch == null || undefined == this.currentMatch) {
        for (const key in this.colNameDef) {
          colArray.push({
            value: key,
            label: this.colNameDef[key],
          });
        }
        constant.sieveSizeDictList.forEach((item) => {
          sieveArray.push({
            value: item.code,
            label: item.size,
          });
        });
      } else {
        let colName;
        for (const key in this.colNameDef) {
          if (!!this.currentMatch[key]) {
            colName = this.currentMatch[key + "Name"];
            colName =
              colName == null || undefined == colName
                ? this.colNameDef[key]
                : colName;

            colArray.push({
              value: key,
              label: colName,
            });
          }
        }

        if (!!this.currentMatch.sieveArray) {
          this.currentMatch.sieveArray.forEach((item) => {
            sieveArray.push({
              value: item.toString().replace(".", "d"),
              label: item,
            });
          });
        }
      }
      this.sieveControl = sieveArray;
      this.colControl = colArray;
    },
    getHomeCount() {
      homeCount({ id: this.bhzName })
        .then((res) => {
          this.countObj = res.count || {};
          this.ncbData = res.ncb || {};
          this.setR1Data();
          this.wdData = res.wd || {};
          this.setR3Data();
          this.ysbData = res.ysb || {};
          this.setR2Data();
          this.jpqxObj = res.jpqx || {};
          // this.setL2Data();
        })
        .catch((r) => {
          Message.error("调取接口出现错误，请联系管理员！");
        });
    },

    // setL2Data() {
    //   this.$nextTick(() => {
    //     this.createEchartsL2();
    //   });
    // },
    setR1Data() {
      this.$nextTick(() => {
        this.createEchartsR1();
      });
    },
    setR2Data() {
      this.$nextTick(() => {
        this.createEchartsR2();
      });
    },
    setR3Data() {
      this.$nextTick(() => {
        this.createEchartsR3();
      });
    },
    // createEchartsL2() {
    //   if (null == this.echartsL2) {
    //     this.echartsL2 = echarts.init(document.getElementById("L2"));
    //   } else {
    //     this.echartsL2.clear();
    //   }
    //   this.echartsL2.showLoading();
    //   this.echartsL2.setOption({
    //     grid: {
    //       top: "4%",
    //       left: "4%",
    //       right: "2%",
    //       bottom: "1%",
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       type: "category",
    //       data: this.jpqxObj.x || [],
    //       splitLine: {
    //         show: false,
    //       },
    //     },
    //     yAxis: {
    //       type: "value",
    //       splitLine: {
    //         show: false,
    //       },
    //     },
    //     series: [
    //       {
    //         data: this.jpqxObj.y || [],
    //         type: "line",
    //         smooth: true,
    //       },
    //     ],
    //   });
    //   this.echartsL2.hideLoading();
    // },
    createEchartsR1() {
      if (null == this.echartsR1) {
        this.echartsR1 = echarts.init(document.getElementById("neiChanBi"));
      } else {
        this.echartsR1.clear();
      }
      this.echartsR1.showLoading();
      this.echartsR1.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.ncbData.name || [],
          itemHeight: 5,
          textStyle: {
            fontSize: 8,
            color: "#ffffff",
          },
        },
        grid: {
          top: "20%",
          left: "4%",
          right: "2%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.ncbData.x || [],
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        yAxis: {
          type: "value",
          // name: "%",
          axisLabel: {
            // 使用 formatter 属性来格式化标签文本
            formatter: "{value}%", // 在这里添加单位
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            name: "骨料1",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y1,
          },
          {
            name: "骨料2",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y2,
          },
          {
            name: "骨料3",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y3,
          },
          {
            name: "骨料4",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y4,
          },
          {
            name: "骨料5",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y5,
          },
          {
            name: "骨料6",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y6,
          },
          {
            name: "粉料1",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y7,
          },
          {
            name: "粉料2",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y8,
          },
          {
            name: "粉料3",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y9,
          },
          {
            name: "沥青",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y10,
          },
          {
            name: "再生料",
            type: "line",
            // stack: "Total",
            data: this.ncbData.y11 || [],
          },
        ],
      });
      this.echartsR1.hideLoading();
    },
    // createEchartsR2Old() {
    //   if (null == this.echartsR2) {
    //     this.echartsR2 = echarts.init(document.getElementById("R211"));
    //   } else {
    //     this.echartsR2.clear();
    //   }
    //   this.echartsR2.showLoading();
    //   this.echartsR2.setOption({
    //     visualMap: [
    //       {
    //         show: false,
    //         type: "continuous",
    //         seriesIndex: 0,
    //         min: 0,
    //         max: 400,
    //       },
    //       {
    //         show: false,
    //         type: "continuous",
    //         seriesIndex: 1,
    //         dimension: 0,
    //         min: 0,
    //         // max: dateList.length - 1,
    //       },
    //     ],
    //     title: [
    //       {
    //         left: "left",
    //         text: "温度曲线/℃",
    //         textStyle: {
    //           fontSize: 12,
    //           color: "#D8D9DD",
    //         },
    //       },
    //       {
    //         top: "45%",
    //         left: "left",
    //         text: "油石比",
    //         textStyle: {
    //           fontSize: 12,
    //           color: "#D8D9DD",
    //         },
    //       },
    //     ],
    //     tooltip: {
    //       trigger: "axis",
    //     },
    //     xAxis: [
    //       {
    //         data: this.wdData.x || [],
    //         splitLine: {
    //           show: false,
    //         },
    //       },
    //       {
    //         data: this.ysbData.x || [],
    //         gridIndex: 1,
    //         splitLine: {
    //           show: false,
    //         },
    //       },
    //     ],
    //     yAxis: [
    //       {},
    //       {
    //         gridIndex: 1,
    //       },
    //     ],
    //     grid: [
    //       {
    //         top: "8%",
    //         right: "2%",
    //         bottom: "60%",
    //       },
    //       {
    //         top: "52%",
    //         right: "2%",
    //         bottom: "6%",
    //       },
    //     ],
    //     series: [
    //       {
    //         type: "line",
    //         showSymbol: false,
    //         data: this.wdData.y || [],
    //       },
    //       {
    //         type: "line",
    //         showSymbol: false,
    //         data: this.ysbData.y || [],
    //         xAxisIndex: 1,
    //         yAxisIndex: 1,
    //       },
    //     ],
    //   });
    //   this.echartsR2.hideLoading();
    // },
    createEchartsR2() {
      if (null == this.echartsR2) {
        this.echartsR2 = echarts.init(document.getElementById("youShiBi"));
      } else {
        this.echartsR2.clear();
      }
      this.echartsR2.showLoading();
      this.echartsR2.setOption({
        tooltip: {
          trigger: "axis",
          // formatter: function (params) {
          //   var res = params[0].axisValueLabel + '<br/>';
          //   for (var i = 0, l = params.length; i < l; i++) {
          //     res += params[i].marker + params[i].value + '%'; // 自定义单位
          //   }
          //   return res;
          // },
        },
        xAxis: [
          {
            data: this.ysbData.x || [],
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              // 使用 formatter 属性来格式化标签文本
              formatter: "{value}%", // 在这里添加单位
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff",
              },
            },
          },
        ],
        grid: [
          {
            top: "4%",
            left: "4%",
            right: "2%",
            bottom: "1%",
            containLabel: true,
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: this.ysbData.y || [],
          },
        ],
      });
      this.echartsR2.hideLoading();
    },
    createEchartsR3() {
      if (null == this.echartsR3) {
        this.echartsR3 = echarts.init(document.getElementById("wdqx"));
      } else {
        this.echartsR3.clear();
      }
      this.echartsR3.showLoading();
      this.echartsR3.setOption({
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: this.wdData.x || [],
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              // 使用 formatter 属性来格式化标签文本
              formatter: "{value}℃", // 在这里添加单位
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff",
              },
            },
          },
        ],
        grid: [
          {
            top: "4%",
            left: "4%",
            right: "2%",
            bottom: "1%",
            containLabel: true,
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: this.wdData.y || [],
          },
        ],
      });
      this.echartsR3.hideLoading();
    },
    getDayWeightList() {
      this.loadingOne = true;
      dayWeightList({ id: this.bhzName }).then((res) => {
        const { list, total } = res;
        this.dayTableData = list;
        this.dayTableTotal = total;
        this.loadingOne = false;
      })
        .catch((r) => {
        this.dayTableData = [];
        this.dayTableTotal = undefined;
        this.loadingOne = false;
      });;
    },
    getweightList() {
      this.loadingTwo = true;
      weightList({ id: this.bhzName })
        .then((res) => {
          this.tableData = res.data || [];
          this.loadingTwo = false;
        })
        .catch((r) => {
          this.tableData = [];
          this.loadingTwo = false;
        });
    },
    // 拼接合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        sums[index] = this.dayTableTotal[column.property];
      });

      return sums;
    },
  },
};
</script>

<style lang="scss" scoped>
.homePageLq {
  width: "100%";
  // height: 965px;
  min-height: calc(100vh - 84px); //965px
  padding: 10px 10px 0 10px;
  background-image: url("../../../assets/images/homePage/bg2p.png");
  background-position: "center";
  background-size: cover;
  /* 背景图片铺满整个容器 */
  background-position: center;
  /* 背景图片居中 */
  background-repeat: no-repeat;
  /* 背景图片不重复 */
  z-index: 1;

  /* 设置层级 */
  .topCenter {
    display: flex;
    justify-content: space-between;
    height: 70%;

    .topL {
      width: 26%;
      height: 100%;

      .L1 {
        width: 100%;
        // height: 45%;
        // height: calc((100vh - 84px) / 100 * 45);
        // height: 300px;
        height: 17.6rem;

        // background: pink;
        .selectBox {
          width: 100%;
          display: flex;
          // height: 36px;
          height: 2.117rem;
          justify-content: center;

          .bhzNameBox {
            display: flex;
            align-content: center;
            height: 100%;
            width: 70%;
            background-image: url("../../../assets/images/homePage/lookBg.png");
            background-size: contain;
            /* 保持图片比例 */
            background-repeat: no-repeat;
            /* 不重复 */
            z-index: 2;
            /* 确保在背景图之上 */

            .itemBox {
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              // font-size: 16px;
              font-size: 0.941rem;
              // line-height: 36px;
              line-height: 2.117rem;
              color: #ffffff;
              background: linear-gradient(
                0deg,
                #79c5ff 0%,
                #ffffff 59.8388671875%,
                #ffffff 100%
              );
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }

        .oneRow {
          width: 100%;
          display: flex;
          justify-content: space-around;

          .img {
            // height: 60px;
            height: 3.529rem;
          }

          .Row {
            height: 100%;
            width: 100%;
            display: flex;

            .rRow {
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              //   height: 100%;
              width: 50%;

              .r1 {
                width: 100%;
                text-align: center;
                background-image: url("../../../assets/images/homePage/rowBg.png");
                background-repeat: no-repeat;
                /* 不重复 */
                z-index: 2;
                /* 确保在背景图之上 */
                font-family: Source Han Sans CN;
                font-weight: 400;
                // font-size: 16px;
                font-size: 0.941rem;
                color: #edfbff;
                // line-height: 40px;
                opacity: 0.98;
              }

              .r2 {
                width: 100%;
                text-align: center;
                font-family: DIN;
                font-weight: bold;
                // font-size: 16px;
                font-size: 0.941rem;
                color: #f7fbff;

                .dw {
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  // font-size: 13px;
                  font-size: 0.764rem;
                  color: #9cc2e3;
                }
              }
            }
          }

          .Row12 {
          }
        }
      }

      .L2 {
        width: 100%;
        // height: 55%;
        // height: calc((100vh - 84px) / 100 * 55);
        // height: 350px;
        height: 20.5rem;
      }
    }

    .cBj {
      position: absolute;
      /* 绝对定位 */
      top: 37%;
      /* 垂直居中 */
      left: 50%;
      /* 水平居中 */
      transform: translate(-50%, -50%);
      /* 使其中心点对齐 */
      width: 50%;
      /* 自定义宽度 */
      height: 70%;
      /* 自定义高度 */
      background-image: url("../../../assets/images/homePage/cBg2P.png");
      background-size: contain;
      /* 保持图片比例 */
      background-repeat: no-repeat;
      /* 不重复 */
      z-index: 2;
      /* 确保在背景图之上 */
    }

    .topR {
      width: 25%;
      height: 100%;

      .neiChanBi {
        width: 100%;
        // height: 45%;
        // height: calc((100vh - 84px) / 100 * 45);
        // height: 300px;
        height: 17.6rem;
      }

      .youShiBi {
        width: 100%;
        // height: 55%;
        // height: calc((100vh - 84px) / 100 * 55);
        // height: 350px;
        height: 20.5rem;
      }
    }
  }

  //.bTable {
  //  height: 30%;
  //  overflow: auto;
  //}
  .titleBox {
    position: relative;
    width: 100%;
    /* 自定义宽度 */
    // height: 44px;
    height: 2.588rem;

    /* 自定义高度 */
    .imgTBg {
      width: 100%;
      height: 100%;
    }

    .textT {
      position: absolute;
      left: 20%;
      top: 35%;
      transform: translate(-50%, -50%);
      /* 使其中心点对齐 */
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      // font-size: 18px;
      font-size: 1.0588rem;
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .wz {
      position: absolute;
      left: 29%;
      top: 35%;
    }
  }
}
</style>
<style lang="scss" scoped>
.bhzNameBox {
  ::v-deep .el-input__inner {
    z-index: 3 !important;
    color: red !important;
    border: none !important;
    font-family: Alimama ShuHeiTi !important;
    font-weight: bold !important;
    font-size: 16px !important;
    // line-height: 36px !important;
    color: #ffffff !important;
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#79c5ff),
      color-stop(59.8388671875%, #ffffff),
      to(#ffffff)
    ) !important;
    background: linear-gradient(
      0deg,
      #79c5ff 0%,
      #ffffff 59.8388671875%,
      #ffffff 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

::v-deep .bTable {
  &:last-child {
    padding-bottom: 20px;
  }

  .el-table,
  .el-table__footer {
    //background: none !important;
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;

    //opacity: 0.8 !important;
    tr {
      border-color: #040f22 !important;
      background: #040f22 !important;
      transition: background-color 0.3s;
      color: #ffffff;

      th,
      td.el-table__cell {
        background: #0e2d54 !important;
        //color: #02aaff !important;
        color: #ffffff !important;
        //opacity: 0.5 !important;
      }

      &:hover {
        color: #000000;
      }
    }
  }
}

.table-border-title {
  margin-top: 10px;
  width: 500px !important;
}
</style>
